
<template>
  <div class="grid _m-2">
    <div class="title d-flex justify-content-between">
      <h3>根据兴趣搜索</h3>
    </div>
    <book-list :bookList="bookList"></book-list>
  </div>
</template>

<script>
import BookList from '../../../components/BookList'
export default {
  name: "List",
  components: {
    BookList
  },
  props: {
    bookList: Array
  },
  data() {
    return {
      booksList: []
    };
  },
  computed: {
    bookDataList () {
      this.booksList.push(...this.bookList)
      return this.booksList;
    }
  },
  // watch: {
  //   data (newData) {
  //     this.bookList.push(...newData)
  //   }
  // }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.grid {
  background: #FFF;

  .title {
    height: 34px;
    font-size: 14px;
    line-height: 34px;

    h3 {
      padding-left: 3vw;
      padding-right: 2vw;
      position: relative;

      i {
        font-size: 12px !important;
        margin-right: 4px;
      }

      &:nth-child(1):after {
        content: '';
        width: 3px;
        height: 14px;
        display: inline-block;
        background: $colorPrimary;
        position: absolute;
        top: 10px;
        left: 1px;
        border-radius: 3px;
      }
    }
  }
}
</style>
